
<div class="nav-tabs-custom">

    <ul class="nav nav-tabs">
        <li class="active"><a href="#uploadFile" data-toggle="tab" aria-expanded="true">上传文件</a></li>
        <li class=""><a href="#networkFile" data-toggle="tab" aria-expanded="false">网络文件</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="uploadFile">
            <form class="form-horizontal">
                <div class="box-body">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <button type="button" class="upload-button" id="upload_file" style="width:100px;">上传文件</button>
                            <span class="num">&emsp;最多上传 <code>{$limit}</code> 个文件,单文件最大 <code>{$file_size} mb</code>，<em style="cursor: help;" title="可上传格式：{$file_types}">支持格式？</em></span>
                            <div id="file_queue"></div>
                            <div class="thumb mt10">
                                <ul class="ace-thumbnails show_file">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="tab-pane" id="networkFile">
            <div class="form-group">
                <label for="inputNetworkUrl">请输入网络地址</label>
                <input type="text" class="form-control" id="inputNetworkUrl" placeholder="http://" onblur="addonlinefile(this)" />
            </div>
        </div>
    </div>
    <div id="att-status" style="display:none"></div>
    <div id="att-name" style="display:none"></div>
</div>
<script type="text/javascript">

//网络地址
function addonlinefile(obj) {
	var strs = $(obj).val() ? '|'+ $(obj).val() : '';
	$('#att-status').html(strs);
}

<?php $timestamp = time();?>
var name         = "thumb";        // input框name值
var multi        = {$limit};       // 1是一张图，非1是多张图
var file_size    = {$file_size};   // 限制上传大小
var quality      = <?php echo !empty($resize_quality) ? $resize_quality : 0; ?>;
var img_width    = <?php echo isset($image_width) ? $image_width : 0;?>;
var img_height   = <?php echo isset($image_height) ? $image_height : 0;?>;
var thumb_width  = <?php echo isset($thumb_width) ? $thumb_width : 0;?>;
var thumb_height = <?php echo isset($thumb_height) ? $thumb_height : 0;?>;
var thumb_type   = <?php echo isset($thumb_type) ? $thumb_type : 1;?>;

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'upload_file', // 上传按钮id
    url : "{:Url('Uploads/uploadFile')}",
    flash_swf_url : '__JS__/plupload/Moxie.swf',
    silverlight_xap_url : '__JS__/plupload/Moxie.xap',
    filters : {
        max_file_size : "<?php echo $file_size . 'mb';?>",
        mime_types: [{title:"选择文件", extensions:"{$file_types}"}],
    },
    <?php if($limit == 1): ?>
    multi_selection: false,
    <?php else: ?>
    multi_selection: true,
    <?php endif; ?>
});

// 上传文件附加参数
uploader.setOption('multipart_params', {
    'timestamp': '<?php echo $timestamp;?>',
    'token': '<?php echo md5("upload_self" . $timestamp);?>',
    'fileExt': '{$fileExt}',
    'size': file_size,
    'quality': quality,
    'img_width': img_width,
    'img_height': img_height,
    'thumb_width': thumb_width,
    'thumb_height': thumb_height,
    'thumb_type': thumb_type,
});

uploader.init();

// 当文件添加到上传队列后触发
uploader.bind('FilesAdded', function(up, files) {
    if (multi > 1) {
        // 已上传文件数量
        var att_status  = $('#att-status').html().substring();
        var att_arr     = att_status.split('|');
        var att_number  = att_arr.length;
        console.log(up.files.length);
        // 判断当前队列数量，如果队列数量超过上传限制，去除选中的文件
        if (up.files.length > multi || uploader.files.length > multi || att_number > multi) {
            layer.msg('最多上传 ' + multi + ' 个文件');
            if (att_number <= multi) {
                for (var i in files) {
                    var file_id = files[i].id;
                    uploader.removeFile(file_id);
                }
                return false;
            }
            return false;
        }
    }
    
    // 上传文件进度条样式
    plupload.each(files, function(file) {        
        var fileName = file.name;
        if (fileName.length > 25) {
            fileName = fileName.substr(0,25) + ' ...';
        }
        html  = '<div id="'+file.id+'" class="queue-item"><div class="cancel">';
        html += '<a href="javascript:;" class="upload-delete" data-val="'+file.id+'">X</a></div>';
        html += '<span class="fileName">'+fileName+' ('+plupload.formatSize(file.size)+')</span><span class="data"></span>';
        html += '<div class="progress"><div class="progress-bar"><!--Progress Bar--></div></div></div>';
        $("#file_queue").append(html);
    });
    uploader.start();
});

// 会在文件上传过程中不断触发，可以用此事件来显示上传进度，更改上传文件进度
uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id).find('.data').html(' - ' + file.percent + '%');
    $('#' + file.id).find('.progress-bar').css('width', file.percent + '%');
    if (file.percent == 100) {
        setTimeout(function(){
            $('#' + file.id).remove();
        }, 3*1000);
    }
});

// 当队列中的某一个文件上传完成后触发
uploader.bind('FileUploaded', function(up, file, responseObject) {
    var res = JSON.parse(responseObject.response);
    if(res.status == 0){
        return layer.alert(res.msg);
    } else {
        data = res.data;
        var html = '<li class="li_'+data.id+' img_hover active_checked" onclick="image_click(this)">';
        html += '<div class="upload_img_div"><a href="javascript:;" title="' + data.name + '">';
        html += '<img src="' + data.img_url + '" alt="' + data.name + '" data-url="' + data.url + '" data-name="' + data.name + '" class="img-responsive" /></a></div>';
        html += '<div class="tools tools-top">';
        html += '<a href="javascript:;" onclick="remove_image(\'li_' + data.id + '\', \'' + file.id + '\');"><i class="fa fa-remove red"></i></a>';
        html += '</div></li>';
        if (multi == 1) {
            $(".show_file").html(html);
            $('#att-status').html('|' + data.url);
            $('#att-name').html('|#-#|' + data.name);
        } else {
            $(".show_file").append(html);
            var divAttr = $('#att-status').html();
            var attName = $('#att-name').html();
            
            $('#att-status').html(divAttr + '|' + data.url);
            $('#att-name').html(attName + '|#-#|' + data.name);
        }
    }
});

// 当发生错误时触发
uploader.bind('Error', function(up, err) {
    return layer.alert(err.message);
});

// 点击图片选中状态
function image_click(e){
    var $this    = $(e);
    var img_val  = $this.find('img').attr('data-url');
    var img_name = $this.find('img').attr('data-name');
    if (!img_val || $this.hasClass("active_checked")) {
        return false;
    }
    
    if (multi == 1) {
        $('#att-status').html('|' + img_val);
        $('#att-name').html('|#-#|' + img_name);
        $this.addClass('active_checked');
    } else {
        var att_status = $('#att-status').html().substring();
        var att_name   = $('#att-name').html().substring();
        if (att_status) {
            att_str = att_status + '|' + img_val;
            att_nam = att_name + '|#-#|' + img_name;
        } else {
            att_str = img_val;
            att_nam = img_name;
        }
        $('#att-status').html(att_str);
        $('#att-name').html(att_nam);
        $this.addClass('active_checked');
    }
}

/**
 * 移除图片功能
 * remove_Class     要移除的class
 * queue_file_id    上传队列的文件id
 **/
function remove_image(remove_Class, queue_file_id){
    if (remove_Class == '') {
        layer.alert('操作失败！', {
            icon: 2,
            title: '提示信息'
        });
    }
    layer.confirm('确定删除？', {icon: 3, title: '提示信息'}, function(index) {        
        // 删除上传队列数量
        var toremove = '';
		var file_id  = queue_file_id;
		for (var i in uploader.files) {
            if (uploader.files[i].id === file_id) {
                toremove = i;
                // uploader.removeFile(toremove);
		    }
		}
        uploader.files.splice(toremove, 1);
        
        // 删除存储文件内容
        if (multi == 1) {
            $('#att-status').html('');
            $('#att-name').html('');
        } else {
            var image_val  = $('.' + remove_Class).find('img').attr('data-url');
            var att_status = $('#att-status').html().substring(1);
            var att_name   = $('#att-name').html().substring(5);
            var att_arr    = att_status.split('|');
            var name_arr   = att_name.split('|#-#|');
            
            for (var i = 0; i <= att_arr.length; i++) {
                if (image_val && att_arr[i] == image_val) {
                    att_arr.splice(i, 1);
                    name_arr.splice(i, 1);
                }
            }
            var att_str  = att_arr.join('|');
            var name_str = name_arr.join('|#-#|');
            if (att_str) {
                att_str  = '|' + att_str;
                name_str = '|#-#|' + name_str;
            } else {
                att_str  = att_str;
                name_str = name_str;
            }
            $('#att-status').html(att_str);
            $('#att-name').html(name_str);
        }
        
        // 关闭询问框，移除删除元素
        layer.close(index);
        $('.' + remove_Class).remove();
    });
}
</script>